<template>
  <div ref="indexRef" class="index-box" @scroll="handleScroll">
    <!-- 导航栏 -->
    <nav-bar :bg-color="navColor" :font-color="fontColor" :icon-color="iconColor"></nav-bar>
    <!-- 项目介绍栏 -->
    <div ref="introduceRef">
      <project-introduce
          @free-make="freeMake"
          @lego-design="legoDesign"
          @webcode="webcode"
      ></project-introduce>
    </div>
    <!-- 模板选择 -->
    <template-select ref="templeTef"></template-select>
    <!-- 积木创作 -->
    <lego-design-introduce-vue ref="legoDesignRef"></lego-design-introduce-vue>
    <!-- 自定义模板 -->
    <custom-template-vue ref="customTempleRef"></custom-template-vue>
    <!--    &lt;!&ndash; 成为赞助者 &ndash;&gt;-->
    <!--    <sponsor-com-vue ref="sponsorRefs"></sponsor-com-vue>-->
    <!--    &lt;!&ndash; 网站相关数据 &ndash;&gt;-->
    <!--    <web-data></web-data>-->
    <!-- footer -->
    <footer-com></footer-com>
    <!-- 回到顶部 -->
    <el-backtop :right="50" :bottom="80"/>

    <!-- 联系我 -->
    <call-me></call-me>

    <!-- GitHub卡片 -->
    <github-card v-if="!appStore.useUserInfoStore.userInfo"></github-card>
  </div>
</template>
<script setup lang="ts">
import appStore from '@/store';
import NavBar from '@/components/NavBar/NavBar.vue';
import ProjectIntroduce from './components/ProjectIntroduceNew.vue';
import TemplateSelect from './components/TemplateSelect.vue';
import CustomTemplateVue from './components/CustomTemplate.vue';
import SponsorComVue from './components/SponsorCom.vue';
import FooterCom from '@/components/FooterCom/FooterCom.vue';
import LegoDesignIntroduceVue from './components/LegoDesignIntroduce.vue';
import CallMe from './components/CallMe.vue';
import {onBeforeUnmount, onMounted, ref} from 'vue';
import {throttle} from 'lodash';
import GithubCard from '@/components/GihubCard/GithubCard.vue';
import WebData from './components/WebData.vue';

// 监听元素滚动
onMounted(() => {
  window.addEventListener('scroll', throttleHandle);
});
onBeforeUnmount(() => {
  window.removeEventListener('scroll', throttleHandle);
});

// 页面滚动改变导航栏样式
const throttleHandle = throttle(() => {
  handleScroll();
}, 300);
const navColor = ref<string>('');
const fontColor = ref<string>('#fff');
const iconColor = ref<string>('#fff');
const handleScroll = () => {
  if (document.documentElement.scrollTop > 0) {
    navColor.value = 'rgba(255, 255, 255, 0.95)';
    fontColor.value = 'green';
    iconColor.value = 'green';
  } else {
    navColor.value = 'rgba(255, 255, 255, 0)';
    iconColor.value = '#fff';
    fontColor.value = '#fff';
  }
};

// 点击免费制作
const templeTef = ref<any>(null);
const freeMake = () => {
  templeTef.value.scrollIntoView();
};

// 点击积木创作
const legoDesignRef = ref<any>(null);
const legoDesign = () => {
  legoDesignRef.value.scrollIntoView();
};

// 点击成为赞助者
const router = useRouter();
const webcode = () => {
  router.push('/webcode');
};
</script>
<style lang="scss" scoped>
.index-box {
  position: relative;
  z-index: 0;
}
</style>
